<template>
  <div class="home">
    <div class="bg">
      <h3 class="text">你下次想去哪儿？</h3>
      <div class="search">
        <router-link :to="{name:'Search'}">
          <van-search
          placeholder="请输入搜索关键词"
          style="border-radius: 20px"
        />
        </router-link>
        
        <div class="choose">
          <div class="choose-l">
            <van-cell is-link @click="dateShowPopup"
              ><p>选择日期</p>
              <span>{{ date }}</span></van-cell
            >
            <van-popup v-model="dateShow">
              <van-cell
                title="选择日期区间"
                :value="date"
                @click="dateShow = true"
              />
              <van-calendar
                v-model="dateShow"
                type="range"
                @confirm="onConfirm"
              />
            </van-popup>
          </div>

          <div class="choose-r">
            <van-cell is-link @click="showPopup">
              <p>房间数</p>
              <span
                >{{ numValue }}间-{{ peopleValue }}人-{{
                  childernValue
                }}儿童</span
              >
            </van-cell>
            <van-popup v-model="show" >
              <div class="content">
                <div class="content-size">
                  <div>
                    <p>房间数</p>
                    <van-stepper
                      v-model="numValue"
                      theme="round"
                      button-size="22"
                      disable-input
                    />
                  </div>
                </div>
                <div class="content-size">
                  <div>
                    <p>成年人</p>
                    <van-stepper
                      v-model="peopleValue"
                      theme="round"
                      button-size="22"
                      disable-input
                    />
                  </div>
                </div>
                <div class="content-size">
                  <div>
                    <p>未成年人</p>
                    <van-stepper
                      v-model="childernValue"
                      min="0"
                      theme="round"
                      button-size="22"
                      disable-input
                    />
                  </div>
                </div>
                <van-button
                  class="btn"
                  type="primary"
                  @click="closeHandle"
                  block
                  >确定</van-button
                >
              </div>
            </van-popup>
          </div>
        </div>
        <button class="sou-btn">搜索酒店</button>
      </div>
    </div>
    <h4>最近搜索</h4>
    <van-grid>
      <van-grid-item v-for="item in loadProductCategories" :key="item.id">
        <img :src="item.coverImage | dalImg" alt="" />
        <p>{{ item.name }}</p>
        <p>{{ item.desc }}</p>
      </van-grid-item>
    </van-grid>
    <h4>最受欢迎的旅游胜地</h4>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in banners" :key="item.id">
        <img :src="item.coverImage | dalImg" alt="" />
      </van-swipe-item>
    </van-swipe>
    <h4>最实惠的价格</h4>
    <div class="like" v-for="item in loadProduct" :key="item.id" >
      <div class="pic">
        <img :src="item.coverImage | dalImg" alt="" />
      </div>
      <div class="like-text">
        <p class="like-name">{{ item.name }}</p>
        <p class="like-address">{{item.desc}}</p>
        <div class="like-address-t">
          <div class="address"><i class="fa fa-bolt"></i> 距离2km</div>
          <p class="like-price">￥{{item.price}}</p>
        </div>
        <div class="like-bottom">
          <van-rate
            class="star"
            :size="14"
            v-model="starValue"
            color="#13c2c2"
          />
          <p class="evening">/每晚</p>
        </div>
      </div>
    </div>
    <div style="height: 3rem"></div>
  </div>
</template>

<script>
import {
  loadProductCategoriesApi,
  loadBannerApi,
  loadProductsApi,
} from "../services/products";
export default {
  name: "Home",
  // components: {},
  data() {
    return {
      show: false,
      numValue: 1,
      peopleValue: 2,
      childernValue: 0,
      date: "",
      dateShow: false,
      starValue: 4,
      loadProductCategories: [],
      banners: [],
      loadProduct: [],
    };
  },
  created() {
    this.loadData();
    this.loadBanner();
    this.loadProductss();
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    dateShowPopup() {
      this.dateShow = true;
    },
    closeHandle() {
      this.show = false;
    },
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      const [start, end] = date;
      this.dateShow = false;
      this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
    },
    async loadData() {
      const res = await loadProductCategoriesApi();
      this.loadProductCategories = res.data;
    },
    async loadBanner() {
      const res = await loadBannerApi();
      this.banners = res.data;
    },
    async loadProductss() {
      const res = await loadProductsApi();
      this.loadProduct = res.data;
    },
  },
};
</script>

<style scoped>
.home {
  width: 100%;
  height: 100%;
  flex: 1;
  overflow: auto;
}
.bg {
  width: 100%;
  height: 75%;
  background-image: linear-gradient(
      to top,
      rgba(255, 255, 255, 1),
      rgba(255, 255, 255, 0)
    ),
    url(../assets/images/S-bg.jpg);
  background-repeat: no-repeat;
  position: relative;
}
.text {
  position: absolute;
  top: 60vw;
  font-size: 1.4rem;
  left: 10vw;
  color: white;
  font-weight: normal;
}
.search {
  width: 80vw;
  height: 45vw;
  background-color: rgb(252, 252, 252);
  border-radius: 30px;
  position: absolute;
  top: 300px;
  left: 35px;
}
.choose {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.choose p {
  padding: 10px;
  color: darkgray;
}
.choose-l {
  text-align: right;
}
.sou-btn {
  width: 75vw;
  height: 5vh;
  border: none;
  border-radius: 20px;
  margin: 10px;
  color: white;
  background-color: rgb(6, 204, 204);
}
h4 {
  margin: 20px;
}
.my-swipe {
  height: 12rem;
}
.my-swipe .van-swipe-item {
  width: 35vw;
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.my-swipe img {
  width: 100%;
  height: 100%;
}
.content[data-v-fae5bece] {
  width: 90%;
  max-height: 50%;
  margin: auto;
  border-radius: 1rem;
  display: flex;
  margin-top: 1.5rem;
  flex-direction: column;
}
.main {
  padding: 0;
}
.content-size {
  padding-bottom: 0.3rem;
  border-bottom: solid 1px #ccc;
}
.content-size div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0.8rem 1rem 0.8rem;
}

.van-popup--center {
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  width: 80%;
  height: 50%;
}
.btn[data-v-fae5bece] {
  width: 90%;
  border-radius: 2rem;
  margin: auto;
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-top: 1rem;
}
.van-calendar__popup.van-popup--bottom,
.van-calendar__popup.van-popup--top {
  height: 100%;
  border: none;
  overflow: hidden;
}
.van-popup--bottom.van-popup--round {
  border-radius: 16px;
}
.like {
  min-height: 21vh;
  box-shadow: 0px 2px 1.5px 0px #ccc;
  border-radius: 1rem;
  overflow: hidden;
  margin: 1rem;
}
.pic {
  float: left;
  width: 42%;
  height: 21vh;
}
.pic img {
  float: left;
  width: 100%;
  height: 100%;
}
.like-text {
  height: 20vh;
  margin-left: 44%;
  margin-right: 0.4rem;
  margin-top: 0.4rem;
}
.like-name {
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 0.2rem;
}
.like-address {
  color: #bfbfbf;
  font-size: 0.9rem;
  margin-bottom: 3rem;
}
.like-price {
  font-size: 1rem;
  float: right;
}
.like-address-t {
  min-height: 3vh;
}
.address {
  float: left;
}
.like-bottom {
  height: 1.6rem;
}
.star {
  float: left;
  margin-top: 0.2rem;
}
.evening {
  float: right;
}
.van-cell__right-icon {
    margin-left: 4px;
    color: #969799;
    margin-top: -1.55rem;
}
.van-cell--clickable {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
